<template>
  <div >
    <el-row>
      <el-col :span="5" ><div  >
        <organization-tree :treeApi="organizationTreeApi" :refresh="refresh" v-on:listenToChildEvent="showMsgFromChild"></organization-tree>
      </div></el-col>
      <el-col :span="19"><div >
        <organization-table ref="organizationTable" :menuId="this.$route.query.id" v-on:listenToChildEvent="showTableFromChild" v-on:organizationToUser="organizationToUser" v-if="isOrganization"></organization-table>
        <organizationUserTable ref="organizationUserTable" :menuId="this.$route.query.id" v-if="!isOrganization" v-on:userToArganization="userToArganization"></organizationUserTable>
      </div></el-col>
    </el-row>
  </div>
</template>
<style>
</style>
<script>
  import organizationTree from '@/components/tree/yfuTree.vue'
  import organizationTable from '@/view/organization/organizationTable.vue'
  import organizationUserTable from '@/view/organization/organizationUserTable.vue'
  import { organizationTreeApi1 } from '@/view/api/organization.js'
  import store from '@/store'
  export default {
    methods: {
      showMsgFromChild (data) {
//        console.log(data)
        store.commit('setOrganizationId', data.id)
        store.commit('setOrganizationName', data.label)
        this.currentOrganization = data
        let p = {}
        p.id = data.id
        if (this.isOrganization) {
          this.$refs.organizationTable.refreshTableClearSearch()
        } else {
          this.$refs.organizationUserTable.refreshOrganizationUserTable(p)
        }
      },
      refreshTree () {
        this.refresh = Date.now()
      },
      showTableFromChild () {
        this.refresh = Date.now()
      },
      organizationToUser () {
        this.isOrganization = false
        this.refreshTree()
      },
      userToArganization () {
        this.isOrganization = true
        this.refreshTree()
      }
    },

    data () {
      return {
        'currentOrganization': {},
        'organizationTreeApi': organizationTreeApi1,
        'refresh': '',
        isOrganization: true
      }
    },
    components: {
      'organization-tree': organizationTree,
      'organization-table': organizationTable,
      'organizationUserTable': organizationUserTable
    }
  }
</script>
